<template>
  <div>
    <el-card>
      <el-button type="primary" size="small" @click="AddDialogVisible=true">新增</el-button>
      <el-button type="primary" size="small" @click="manualScan()">手动扫描</el-button>
      <!--搜索框-->
      <div style="display: inline-block;margin-left: 10px">
        <el-input placeholder="主机IP地址模糊搜索" v-model.trim="searchContent"
                  class="input-with-select" size="mini" clearable>
          <el-button slot="append" icon="el-icon-search el-icon--right" @click="search()"></el-button>
        </el-input>
      </div>
      <!--表格-->
      <el-table :data="tableData">
        <!--<el-table-column min-width="25%" prop="id" label="ID"></el-table-column>-->
        <el-table-column min-width="85%" prop="ipAddress" label="IP地址"></el-table-column>
        <el-table-column min-width="50%" label="日志扫描">
          <template v-slot="scope">
            <el-switch
                @change="changeActivate(scope.row)"
                v-model="scope.row.isActivate=='yes'?true:false"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column min-width="50%" prop="user" label="用户名"></el-table-column>
        <el-table-column min-width="80%" label="密码">
          <template v-slot="scope">
            <div class="killBorder">
              <el-input show-password size="mini" :value="scope.row.password"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="100%" prop="createTime" label="创建时间"></el-table-column>
        <el-table-column min-width="100%" label="上次扫描时间">
          <template v-slot="scope">
            {{!scope.row.lastScanTime && typeof(scope.row.lastScanTime)!="undefined" && scope.row.lastScanTime!=0?'null':scope.row.lastScanTime}}
          </template>
        </el-table-column>
        <el-table-column min-width="100%" label="更新时间">
          <template v-slot="scope">
            {{!scope.row.updateTime && typeof(scope.row.updateTime)!="undefined" && scope.row.updateTime!=0?'null':scope.row.updateTime}}
          </template>
        </el-table-column>
        <el-table-column min-width="80%" label="操作">
          <template v-slot="scope">
            <el-button size="mini" type="success"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-size="queryInfo.pageSize"
          :page-sizes="[5,10]"
          layout="total,sizes,prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>

    <!--新增对话框-->
    <el-dialog @closed="closeAddDialog()" title="新增日志扫描主机" :visible.sync="AddDialogVisible" width="35%" center>
      <el-form label-position="left" label-width="160px" :model="addLogScanHost" :hide-required-asterisk="true">
        <el-form-item label="IP地址">
          <el-input type="text" class="dialog" clearable
                    v-model.trim="addLogScanHost.ipAddress" size="small"
                    placeholder="请输入主机IP地址">
          </el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input type="text" class="dialog" clearable
                    v-model.trim="addLogScanHost.user" size="small"
                    placeholder="请输入主机登录用户名">
          </el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" show-password class="dialog" clearable
                    v-model.trim="addLogScanHost.password" size="small"
                    placeholder="请输入主机登录密码">
          </el-input>
        </el-form-item>
        <el-form-item label="系统日志文件地址">
          <el-input type="text" class="dialog" clearable
                    v-model.trim="addLogScanHost.systemLogPath" size="small"
                    placeholder="请输入系统日志文件地址">
          </el-input>
        </el-form-item>
        <el-form-item label="安全模块日志文件地址">
          <el-input type="text" class="dialog" clearable
                    v-model.trim="addLogScanHost.securityLogPath" size="small"
                    placeholder="请输入安全模块日志文件地址">
          </el-input>
        </el-form-item>
        <el-form-item label="suricata日志文件地址">
          <el-input type="text" class="dialog" clearable
                    v-model.trim="addLogScanHost.suricataLogPath" size="small"
                    placeholder="请输入suricata日志文件地址">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="cancelAdd()" size="mini">取 消</el-button>
          <el-button type="primary" @click="confirmAdd()" size="mini">确 定</el-button>
        </span>
    </el-dialog>
    <!--修改对话框-->
    <el-dialog title="修改日志扫描主机" :visible.sync="EditDialogVisible" width="35%" center>
      <el-form label-position="left" label-width="160px" :model="editLogScanHost" :hide-required-asterisk="true">
        <el-form-item label="ID" v-if="false">
          <el-input type="text" class="dialog" clearable disabled
                    v-model.trim="editLogScanHost.id" size="small"
                    placeholder="ID">
          </el-input>
        </el-form-item>
        <el-form-item label="IP地址">
          <el-input type="text" class="dialog" clearable disabled
                    v-model.trim="editLogScanHost.ipAddress" size="small"
                    placeholder="主机IP地址">
          </el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input type="text" class="dialog" clearable
                    v-model.trim="editLogScanHost.user" size="small"
                    placeholder="主机登录用户名">
          </el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" show-password class="dialog" clearable
                    v-model.trim="editLogScanHost.password" size="small"
                    placeholder="主机登录密码">
          </el-input>
        </el-form-item>
        <el-form-item label="系统日志文件地址">
          <el-input type="text" class="dialog" clearable
                    v-model.trim="editLogScanHost.systemLogPath" size="small"
                    placeholder="系统日志文件地址">
          </el-input>
        </el-form-item>
        <el-form-item label="安全模块日志文件地址">
          <el-input type="text" class="dialog" clearable
                    v-model.trim="editLogScanHost.securityLogPath" size="small"
                    placeholder="安全模块日志文件地址">
          </el-input>
        </el-form-item>
        <el-form-item label="suricata日志文件地址">
          <el-input type="text" class="dialog" clearable
                    v-model.trim="editLogScanHost.suricataLogPath" size="small"
                    placeholder="suricata日志文件地址">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="EditDialogVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="confirmEdit()" size="mini">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  created() {
    this.getLogInfo();
  },
  data() {
    return {
      tableData: [],
      // 控制密码显示隐藏
      isShow: false,
      // 总数据
      total: 0,
      queryInfo: {
        ipAddress: '',       //主机ip
        isActivate: '',      //是否启用日志扫描
        pageNum: 1,         // 当前的页数
        pageSize: 5,        // 每页显示数据
      },
      pageNum: 1, //当前页
      pageSize: 5, //每页显示条目数
      // 对话框
      AddDialogVisible: false,
      EditDialogVisible: false,
      addLogScanHost: {
        ipAddress: '',        // 主机ip地址
        user:'',              // 主机登录用户名
        password: '',         // 主机登录密码
        systemLogPath: '',   // 系统日志文件地址
        securityLogPath: '',  // 安全模块日志文件地址
        suricataLogPath: ''   // suricata日志文件地址
      },
      editLogScanHost: {
        id: '',
        ipAddress: '',
        user:'',
        password: '',
        systemLogPath: '',
        securityLogPath: '',
        suricataLogPath: ''
      },
      searchContent: ''
    }
  },
  methods: {
    // 获取日志数据
    getLogInfo() {
      this.$axios.get('/awareness/api/logHost/info',{
        params: this.queryInfo
      })
        .then((res)=> {
          // console.log(res);
          this.tableData = res.data.result.data;
          this.total = res.data.result.all;
        })
        .catch(() => {
          // this.$message.error('获取数据失败！');
        });
    },
    // 手动扫描
    manualScan() {
      let message = this.$message({
        message: "正在扫描中...",
        duration: 0
      });
      this.$axios.get('/awareness/api/logHost/log')
          .then((res)=> {
            // console.log(res);
            if (res.data.status.code == 1) {
              message.close();
              this.$message.success("扫描完成！");
              return;
            }
            message.close();
            this.$message.error("操作失败！");
          })
          .catch(() => {

          });
    },
    // 监听pageSize
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getLogInfo();
    },
    // 监听pageNum
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getLogInfo();
    },
    // 修改启用状态
    changeActivate(row) {
      console.log(row.isActivate);
      let queryInfo = this.$qs.stringify({
        id: row.id
      });
      if(row.isActivate == 'yes') {
        // 关闭
        this.$axios.put('/awareness/api/logHost/deactivate',queryInfo)
          .then((res)=> {
            // console.log(res);
            if (res.data.status.code == 1) {
              this.$message.success("已关闭");
              this.getLogInfo();
              return;
            }
            this.$message.error("操作失败！");
          })
          .catch(() => {

          });
      } else {
        // 开启
        this.$axios.put('/awareness/api/logHost/activate',queryInfo)
            .then((res)=> {
              // console.log(res);
              if (res.data.status.code == 1) {
                this.$message.success("已开启")
                this.getLogInfo();
                return;
              }
              this.$message.success("操作失败！")
            })
            .catch(() => {

            });
      }
    },
    // 取消新增
    cancelAdd() {
      this.AddDialogVisible = false;
      this.addLogScanHost.ipAddress = '';
      this.addLogScanHost.user = '';
      this.addLogScanHost.password = '';
      this.addLogScanHost.systemLogPath = '';
      this.addLogScanHost.securityLogPath = '';
      this.addLogScanHost.suricataLogPath = '';
    },
    // 确认新增
    confirmAdd() {
      if (this.addLogScanHost.ipAddress == '' || this.addLogScanHost.user == '' || this.addLogScanHost.password == ''
      || this.addLogScanHost.systemLogPath == '' || this.addLogScanHost.securityLogPath == ''
      || this.addLogScanHost.suricataLogPath == '') {
        this.$message.error("请输入完整信息！");
        return;
      }
      // 封装请求信息
      let queryInfo = this.$qs.stringify({
        ipAddress: this.addLogScanHost.ipAddress,
        user: this.addLogScanHost.user,
        password: this.addLogScanHost.password,
        systemLogPath: this.addLogScanHost.systemLogPath,
        securityLogPath: this.addLogScanHost.securityLogPath,
        suricataLogPath: this.addLogScanHost.suricataLogPath,
      });
      // console.log(queryInfo);
      this.$axios.post('/awareness/api/logHost/info', queryInfo)
        .then(res => {
          // console.log(res);
          if (res.data.status.code == 1) {
            this.$message.success("新增成功！");
            return;
          }
          this.$message.error("无法添加主机！");
      }).catch( err => {

      });
    },
    // 新增对话框关闭后的回调
    closeAddDialog() {
      this.addLogScanHost.ipAddress = '';
      this.addLogScanHost.user = '';
      this.addLogScanHost.password = '';
      this.addLogScanHost.systemLogPath = '';
      this.addLogScanHost.securityLogPath = '';
      this.addLogScanHost.suricataLogPath = '';
    },
    // 编辑
    handleEdit(index,row) {
      // console.log(index,row);
      // 填充当前行数据
      this.editLogScanHost.id = row.id;
      this.editLogScanHost.ipAddress = row.ipAddress;
      this.editLogScanHost.user = row.user;
      this.editLogScanHost.password = row.password;
      this.editLogScanHost.systemLogPath = row.systemLogPath;
      this.editLogScanHost.securityLogPath = row.securityLogPath;
      this.editLogScanHost.suricataLogPath = row.suricataLogPath;
      // 打开对话框
      this.EditDialogVisible = true;
    },
    // 确认修改
    confirmEdit() {
      // 检查数据完整性
      if (this.editLogScanHost.id == '' || this.editLogScanHost.user == '' || this.editLogScanHost.password == ''
          || this.editLogScanHost.systemLogPath == '' || this.editLogScanHost.securityLogPath == ''
          || this.editLogScanHost.suricataLogPath == '') {
        this.$message.error("请输入完整信息！");
        return;
      }
      // 封装请求信息
      let queryInfo = this.$qs.stringify({
        id: this.editLogScanHost.id,
        ipAddress: this.editLogScanHost.ipAddress,
        user: this.editLogScanHost.user,
        password: this.editLogScanHost.password,
        systemLogPath: this.editLogScanHost.systemLogPath,
        securityLogPath: this.editLogScanHost.securityLogPath,
        suricataLogPath: this.editLogScanHost.suricataLogPath,
      });
      console.log(queryInfo);
      this.$axios.put('/awareness/api/logHost/info', queryInfo)
          .then(res => {
            // console.log(res);
            if (res.data.status.code == 1) {
              this.$message.success("修改成功！");
              // 重新获取当前数据
              this.getLogInfo();
              return;
            }
            this.$message.error("修改失败！");
          }).catch( err => {

      });
    },
    // 删除
    handleDelete(index,row) {
      this.$confirm('是否删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 编写单个删除逻辑
        this.$axios.delete(`/awareness/api/logHost/info/${row.id}`)
            .then(res=>{
              //console.log(res)
              if (res.data.status.code == 1) {
                this.$message.success('删除成功！');
                this.getLogInfo();
                return;
              }
              this.$message.error("删除失败！")
            })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    // 模糊搜索功能
    search() {
      this.queryInfo.ipAddress = this.searchContent;
      this.getLogInfo();
    }
  },
  watch: {
    searchContent() {
      if (this.searchContent == '') {
        this.queryInfo.ipAddress = '';
        // 搜索框为空，恢复原来数据
        this.getLogInfo();
      }
    }
  }
}
</script>

<style scoped>
.el-card {
  width: 100%;
  margin: 0 auto;
}
.el-table {
  width: 100%;
  font-family: 宋体;
  font-size: 16px;
}
.el-table /deep/ .cell {
  overflow: visible;
}
.el-pagination {
  margin-top: 15px;
}
/deep/ .el-dialog__body {
  padding: 10px 20px;
  line-height: 25px;
}
/deep/ .el-dialog__header {
  background-color: #87b6da;
  padding: 10px;
}
/deep/ .el-dialog__title {
  color: white;
  font-family: 黑体;
}
/* 利用穿透，设置input边框和光标隐藏 */
.killBorder >>>.el-input__inner{
  border: 0;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.247);
  caret-color:transparent;
}

.input {
  width: 20%;
  margin-right: 20px;
}
.dialog {
  width: 85%;
}
/deep/ .el-dialog--center .el-dialog__body {
  text-align: center;
  padding: 10px 15px 0px 30px;
}
.el-form-item {
  margin-bottom: 10px;
}

</style>